import { Button, Form, Input, Tabs, Spin, message  } from 'antd';
import { useState } from 'react';
import './login.css'
import { login, register } from '../../api/login'
import { useNavigate } from 'react-router-dom';
function Login() {
  const navigate = useNavigate();
  let [activeKey, setActiveKey] = useState('1')
  let [ loading, setLoading ] = useState(false)
  const onFinish = async (values) => {
    console.log('Success:', values);
    if (activeKey === '1') {
      loginFormSubmit(values);
    } else {
      registerFormSubmit(values);
    }
    
  };
  const loginFormSubmit = async(values) => {
    setLoading(true);
    try {
      let res = await login(values)
      console.log('Success:', res)
      if (res.code === 200) {
        localStorage.setItem('token', res.data);
        navigate('/ArticleList')
      }
      setLoading(false);
    } finally {
      setLoading(false);
    }
  }
  const registerFormSubmit = async (values) => {
    setLoading(true);
    try {
      var params = {
        username: values.username,
        password: values.password,
      }
      let res = await register(values)
      console.log('Success:', res)
      if (res.code === 200) {
        setActiveKey('1')
        message.success('注册成功')
      }
      setLoading(false);
    } finally {
      setLoading(false);
    }
  }
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  
  
  const onChange = (e) => {
    setActiveKey(e)
    console.log('Change:',activeKey, e);
  }
  return (
    <Spin className="login" spinning={loading}>
      <Tabs
        className="tab-pane"
        defaultActiveKey="1"
        activeKey={activeKey}
        onChange={onChange}
        centered
        size={'large'}
        items={[
          {
            label: '登录',
            key: '1',
          },
          {
            label: '注册',
            key: '2',
          }
        ]}
      />
   
        <div className="form-container">
          <Form
            name="basic"
            className="login-form"
            labelCol={{
              span: 8,
            }}
            wrapperCol={{
              span: 16,
            }}
            initialValues={{
              remember: true,
            }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            autoComplete="off"
          >
            <Form.Item
              label="用户名"
              name="username"
              rules={[
                {
                  required: true,
                  message: '请输入用户名!',
                },
              ]}
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="密码"
              name="password"
              rules={[
                {
                  required: true,
                  message: '请输入密码!',
                },
              ]}
            >
              <Input.Password />
            </Form.Item>
            <Form.Item
              wrapperCol={{
                offset: 8,
                span: 16,
              }}
            >
              <Button type="primary" htmlType="submit">
                提交
              </Button>
            </Form.Item>
          </Form>
          </div> 

    </Spin>
  );
}

export default Login;
